<template>
  <el-card>
    <el-row>
      <el-col :span="1.5">
          <el-input v-model="info.name" placeholder="请输入表名" />
      </el-col>
      <el-col :span="1.5">
        <el-input v-model="info.comment" placeholder="请输入表备注" />
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          @click="handleNewColumn"
        >新增字段</el-button>
      </el-col>
    </el-row>
    <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
      <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
      <el-table-column label="字段描述" min-width="10%">
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnComment"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Java类型" min-width="11%">
        <template slot-scope="scope">
          <el-select v-model="scope.row.javaType" @change="handlerJavaType(scope.row)">
            <el-option label="Long" value="Long"/>
            <el-option label="String" value="String"/>
            <el-option label="Integer" value="Integer"/>
            <el-option label="Double" value="Double"/>
            <el-option label="BigDecimal" value="BigDecimal"/>
            <el-option label="Date" value="Date"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="字段列名"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnName"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="字段类型"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnType"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import {addGenTable, updateGenTable} from "@/api/tool/gen";
  import {optionselect as getDictOptionselect} from "@/api/system/dict/type";
  import {listMenu as getMenuTreeselect} from "@/api/system/menu";
  import basicInfoForm from "./basicInfoForm";
  import genInfoForm from "./genInfoForm";
  import Sortable from 'sortablejs'

  export default {
    name: "GenEdit",
    components: {
      basicInfoForm,
      genInfoForm
    },
    data() {
      return {
        // 表格的高度
        tableHeight: document.documentElement.scrollHeight - 245 + "px",
        // 表信息
        tables: [],
        // 表列信息
        columns: [{
          "searchValue": null,
          "createBy": "admin",
          "createTime": "2022-02-24 13:59:17",
          "updateBy": "",
          "updateTime": "2022-02-24 14:03:52",
          "remark": null,
          "params": {},
          "columnId": 1,
          "tableId": 1,
          "columnName": "id",
          "columnComment": "主键",
          "columnType": "int(255)",
          "javaType": "Long",
          "javaField": "id",
          "isPk": "1",
          "isIncrement": "0",
          "isRequired": null,
          "isInsert": "1",
          "isEdit": null,
          "isList": null,
          "isQuery": null,
          "queryType": "EQ",
          "htmlType": "input",
          "dictType": "",
          "sort": 1,
          "required": false,
          "insert": true,
          "edit": false,
          "capJavaField": "Id",
          "superColumn": false,
          "query": false,
          "increment": false,
          "usableColumn": false,
          "list": false,
          "pk": true
        }],
        // 字典信息
        dictOptions: [],
        // 菜单信息
        menus: [],
        // 表详细信息
        info: {}
      };
    },
    created() {
    },
    methods: {
      /** 提交按钮 */
      submitForm() {
        const genTable = Object.assign({tableName:this.info.name,tableComment:this.info.comment});
        genTable.columns = this.columns;
        addGenTable(genTable).then(res => {
          this.$modal.msgSuccess(res.msg);
          if (res.code === 200) {
            this.close();
          }
        });
      },
      /** 关闭按钮 */
      close() {
        const obj = {path: "/tool/gen", query: {t: Date.now(), pageNum: this.$route.query.pageNum}};
        this.$tab.closeOpenPage(obj);
      },
      handleNewColumn(){
        this.columns.push({})
      },
      handlerJavaType(row ){
        switch (row.javaType) {
          case "Long":
            row.columnType="int(255)";
            break;
          case "String":
            row.columnType="varchar(255)";
            break;
          case "Integer":
            row.columnType="int(11)";
            break;
          case "Double":
            row.columnType="int(11)";
            break;
          case "BigDecimal":
            row.columnType="int(11)";
            break;
          case "Date":
            row.columnType="datetime";
            break;

        }

      }
    },
    mounted() {
      const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
      const sortable = Sortable.create(el, {
        handle: ".allowDrag",
        onEnd: evt => {
          const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
          this.columns.splice(evt.newIndex, 0, targetRow);
          for (let index in this.columns) {
            this.columns[index].sort = parseInt(index) + 1;
          }
        }
      });
    }
  };
</script>
<style scoped>
  .allowDrag:hover{
    cursor: pointer;
  }
</style>
